<template>
  <div id="test2">


    <el-dialog title="创建任务" :visible.sync="dialogFormVisibleact">

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="任务名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="任务类型">
          <el-select v-model="form.type" placeholder="请选择活动类型" >
           <el-option
      v-for="item in acttypeoption"
      :key="item.url.label"
      :value="item.url.label"
      :label="item.url.label"
      value-key="item.url.path"
     >
      <span style="float: left">{{ item.url.label }}</span>
      <img  style="width: 30px; height: 30px;float: right"  :src="require('../assets/' + item.url.path)" alt=" "/>
    </el-option>
            
          </el-select>
        </el-form-item>
        <el-form-item label="截至时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择截至日期" v-model="form.date" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="任务说明">
          <el-input type="textarea" v-model="form.tips"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitact">立即创建</el-button>
          <el-button @click="(dialogFormVisibleact = false)">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <el-dialog title="学生列表" :visible.sync="dialogFormVisiblestudent">

      <el-table :data="students">
        <el-table-column label="头像" width="150">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </el-table-column>
        <el-table-column property="stuname" label="学生姓名" width="200"></el-table-column>
        <el-table-column property="classid" label="学生班级ID"></el-table-column>
        <el-table-column label="操作">
          <template slot="header">
            <el-button size="mini" @click="addstudent">添加学生</el-button>
          </template>


          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deletestudent(scope.$index, scope.row)">移除学生
            </el-button>
          </template>

        </el-table-column>
      </el-table>


    </el-dialog>
    <el-dialog title="添加学生" :visible.sync="dialogresetVisibleaddstudent" width="800px">
      <el-form>


        <template>

          <el-table ref="multipleTable" :data="addstudents" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="头像" width="120">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </el-table-column>
            <el-table-column prop="stuname" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="stuid" label="学号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="stusex" label="性别" show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px">
            <el-button @click="toaddstudent()">确定添加</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
          </div>
        </template>



      </el-form>

    </el-dialog>
    <el-card>
   
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/classlist' }">返回班级列表</el-breadcrumb-item>
        <el-breadcrumb-item>班级详情</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="content">

        <div class="info">

          <div class="query">
            <img src="http://aiit.iflysse.com/web/img/class-cover.a1a7bc99.png"
              style="width: 200px;height:80;margin:20px" alt="">
            <!-- <label>JAVA3班</label>
                        <label>主讲人：汪自豪</label> -->
            <div style="width: 300px;height:80;margin:20px;">
              <div style="font-weight:bold;display:block;font-size: xx-large;">{{ classdata.classname }}</div>
              <span style="font-weight:bold;">主讲人：{{ classdata.classteachername }} </span>
              <span style="font-weight:bold;" v-show="classdata.classstate === 1 ? true : false">班级状态：开课中</span>
              <span style="font-weight:bold;" v-show="classdata.classstate === -1 ? true : false">班级状态：已结课</span>

              <div style="margin-top: 30px;">
                <span style="font-weight:bold;">学生当前总数：{{ classdata.classpeople }} </span>
                <span @click="showstudent()" style="font-weight:bold;color:blue">管理</span>
              </div>
            </div>

          </div>


        </div>

        <div class="main">
          <span class="item-text">课堂互动</span>
          <div>
            <el-button type="text">全部</el-button>
            <el-button type="text">发布中</el-button>
            <el-button type="text">已过期</el-button>
            <el-button type="text" @click="createact">新建任务</el-button>
          </div>


          <template>
            <el-table :data="tableData" style="width: 100%" height="450">
              <el-table-column width="280">
                <template slot-scope="scope">
                  <div style="display:flex;">
                    <img :src="require('../assets/' + scope.row.actsrc)" class="pic" alt="">
                    <div style="margin-left: 15px;">
                      <div class="text-title">{{ scope.row.actname }}</div>
                      <div>发布时间：{{ scope.row.createtime }}</div>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column width="280">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <div slot="reference" class="name-wrapper">

                      <span>备注：{{ scope.row.acttips }}</span>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>



              <el-table-column width="180">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.acttype }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>


              <el-table-column width="280">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <div slot="reference" class="name-wrapper">
                      <el-tag type="danger" size="medium">截至日期：{{ scope.row.deadline }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>


              <el-table-column fixed="right" width="380">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                  <el-button type="text" size="small">编辑</el-button>
                  <el-button @click="deleteact(scope.row)" type="text" size="small">删除任务</el-button>
                  <el-button  @click="tosendemail(scope.row)" type="text" size="small">一键提醒</el-button>
                  <el-button type="text" size="small">自动预警</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>




        </div>

      </div>

    </el-card>
  </div>
</template>
<script>
export default {
  
  name: 'test2',
  //组件创建
  created() {
    this.theclassid = this.$route.query.classid
    this.classdata.classid = this.$route.query.classid
    this.classdata.classstate = this.$route.query.classstate
    this.classdata.classteachername = this.$route.query.classteachername
    this.classdata.classpeople = this.$route.query.classpeople
    this.classdata.classname = this.$route.query.classname
    console.log(this.classdata);
    this.pushactalldata()
  },
  mounted() {
  },
  data() {
    return {

      acttypeoption: [{
    
          url:{
            path:'file folder_yellow.png',
            label:'互评'
          }
        }, {
      
          url:{
            path: 'zip、rar.png',
            label: '案例分析',
          }
        }, {
         
    
          url:{
            path: 'file.png',
            label:"作业"
          }
        }, {

          url:{
            label: '代码上传',
            path:'div.png'
          }
        }, {
          url:{
            label: '评测',
            path:'xlsx.png',
          },
        }],
      actdata: {
        classid: this.theclassid,
        lastnoticetime: '未赋值',
        createtime: "",
        actsrc: "未赋值",
        acttype: "未赋值",
        deadline: "未赋值",
        actname: "未赋值",
        acttips: "未赋值"
      },//活动数据模板

      form: {
        name: '',
        date: '',
        type:'',
        tips: ''
      },//任务表单
      classdata: {
        classid: null,
        classstate: null,
        classpeople: null,
        classteachername: null,
        classname: null
      },//页面传过来的class数据
      multipleSelection: [],//选中的学生
      stuids: [],//学号集合
      theclassid: null,
      students: {
        stuname: "csh",
        stuid: 10086313,
        stusex: "男",
        classid: 999
      },

      addstudents: [
        {
          stuname: "csh",
          stuid: 1008611,
          stusex: "男",
          classid: 999
        },
        {
          stuname: "csh",
          stuid: 1008622,
          stusex: "男",
          classid: 999
        },
      ],
      formLabelWidth: '120px',
      dialogFormVisibleact: false,//活动面包
      dialogFormVisible: false,
      dialogFormVisiblestudent: false,//查看学生面板
      dialogresetVisible: false,
      dialogresetVisibleaddstudent: false,//增加学生面板
      tableData: [{
        title: "java测试",
        type: "作业",
        date: "2022-11-9"
      }]
    }
  },
  methods: {
    tosendemail(row){
      var that=this
      this.$axios.post('/email/send',row)
        .then(function (response) {
      if(response.data.code==200){
        that.$message({
          showClose: true,
          message: response.data.data,
          type: 'success'
        });
      }else{
        that.$message({
          showClose: true,
          message: response.data.data,
          type: 'warning'
        });
      }
        console.log(response);
          
        
        })
        .catch(function (error) {
          console.log(error);
        
          that.$message({
          showClose: true,
          message: '操作失败！',
          type: 'error'
        });
        });
    },
    getNowTime() {
    var date = new Date();
    this.year = date.getFullYear();
    this.month = date.getMonth() + 1;
    this.date = date.getDate();
    this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    this.milliSeconds = date.getMilliseconds();
    var currentTime = this.year+'-'+this.month + '-' + this.date + ' ' + this.hour + ':' + this.minute + ':' + this.second ;
    return currentTime;
},

    pushactalldata(){
      var that=this
      this.$axios.post('/act/getall',this.classdata)
        .then(function (response) {
      
          console.log("获取班级所有活动成功！");
          console.log(response);
          that.tableData=response.data.data
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    deleteact(row){ 
      var that =this
  
      console.log(row);
      this.$axios.post('/act/delete', row)
        .then(function (response) {
          console.log("删除成功");
          console.log(response.data);
          that.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        });
          that.pushactalldata()
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //添加活动 dao
    onSubmitact() {
      //收集创建act数据

      var that=this
      var path="图片路径为空"
      this.actdata.actname=this.form.name
      this.actdata.acttype=this.form.type
      this.actdata.acttips=this.form.tips
      this.actdata.classid=this.theclassid
      this.actdata.deadline=this.form.date
      this.actdata.createtime=this.getNowTime()
      console.log(this.actdata.acttype);
      for(var i=0;i<this.acttypeoption.length;i++){
        if (this.actdata.acttype==this.acttypeoption[i].url.label) {
          path=this.acttypeoption[i].url.path
        }
      }
      console.log(path);
      this.actdata.actsrc=path
      this.$axios.post('/act/add', this.actdata)
        .then(function (response) {
          that.$message({
          showClose: true,
          message: '创建成功',
          type: 'success'
        });
          console.log("创建成功");
          console.log(response.data);
          that.dialogFormVisibleact = false
          that.pushactalldata();
        })
        .catch(function (error) {
          console.log(error);
        });


    },
    createact() {
      this.dialogFormVisibleact = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    //刷新学生列表
    pushstudent() {
      var that = this
      this.$axios.get('/student/getstudent', {
        params: {
          classid: that.theclassid
        }

      })
        .then(function (response) {
          that.students = response.data.data

          console.log("学生数据刷新成功！");
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    deletestudent(index, row) {
      console.log(row);
      var that = this
      this.$axios.get('/student/deletestudents', {
        params: {
          classid: that.theclassid,
          ids: row.stuid
        }

      })
        .then(function (response) {

          that.$message({
            message: '移除成功!',
            type: 'success'
          });
          that.pushstudent()
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //批量添加学生进班级
    toaddstudent() {
      var ids = []
      console.log(this.multipleSelection);
      var that = this
      for (let index = 0; index < that.multipleSelection.length; index++) {

        console.log(index);
        var id = that.multipleSelection[index].stuid
        ids.push(id)
      }

      console.log("数组长度" + ids.length);
      this.$axios.get('/student/updatestudent', {
        params: {
          ids: ids + '',
          classid: this.theclassid
        }
      })
        .then(function (response) {

          that.$message({
            message: '添加成功!',
            type: 'success'
          });
          that.pushstudent()

          that.dialogresetVisibleaddstudent = false

        })
        .catch(function (error) {
          console.log(error);
        });


    },

    addstudent() {
      var that = this
      that.dialogresetVisibleaddstudent = true
      this.$axios.get('/student/getstudent', {
        params: {
          classid: 0//0表未分配班级的学生
        }

      })
        .then(function (response) {
          that.addstudents = response.data.data

          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });

    },
    showstudent() {
      var that = this
      this.$axios.get('/student/getstudent', {
        params: {
          classid: that.theclassid
        }

      })
        .then(function (response) {
          that.students = response.data.data
          that.dialogFormVisiblestudent = true
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });

    },
  }
}
</script>
<style lang="less" scoped>
.content {
  overflow: hidden;
  width: 100%;
  height: 700px;
}

.query {
  display: flex;
}

.info {
  background-image: url(http://aiit.iflysse.com/web/img/class-cover.a1a7bc99.png);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(0.3px);

  background-position: 50%;
  width: 1570px;
  height: 200px;

}

.item-text:after {
  width: 100%;
  height: 50%;
  display: inline-block;
  background: #67c23a;
  position: absolute;
  bottom: 0;
  left: 0;
  content: " ";
  z-index: -1;
}

.item-text {
  font-family: "\5FAE\8F6F\96C5\9ED1";
  font-weight: 700;
  font-size: 18px;
  color: #242f3e;
  display: inline-block;
  position: relative;
  z-index: 0;
}

.info::after {
  content: " ";
  display: block;
  width: 100%;
  height: 400rpx;
  background: rgba(17, 17, 17, .2);
  z-index: 1;
}

.pic {
  width: 40px;
  height: 40PX;


}

.text-title {

  font-weight: bold;
  font-size: 20px;
}
</style>